import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    StatusBar,
    Image,
    TouchableWithoutFeedback,
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
export default class ChangeMobile extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            hasSend: false,
            time: 60,
        };
    }
    componentWillMount(){
        // fetch('https://result.eolinker.com/XPZsElz98c92f9c243e2f760bf17420ef24906430bea331?uri=lindf.com',
        //     {
        //         method: 'POST',
        //     }
        // )
        // .then((response) => response.json())        // json方式解析，如果是text就是 response.text()
        // .then((responseData) => {   // 获取到的数据处理
        //     this.setState({
        //         newsList: responseData.result.lists,
        //     },function(){
        //         this.setState({
        //             hasData: true
        //         })
        //         console.log(this.state.newsList)
        //     });

        // })
        // .catch((error) => {     // 错误处理
        //     alert(error);
        // })
        // .done();
        
        // request(
        //     'POST', 
        //     '', 
        //     (data)=>{
        //         this.setState({
        //             newsList: data.result.lists,
        //         },function(){
        //             this.setState({
        //                 hasData: true,
        //                 showModal: false
        //             })
        //         });
        //         console.log(data.result);
        //     }
        //     ,
        //     (error)=>{
        //         console.log(error);
        //     }
        // );
    }

    _countDown(){
    	var _this = this;
    	_this.setState({
    		hasSend: true
    	});
    	setTimeout(function(){
    		if(_this.state.time > 0){
	    		_this.setState({
		    		time: _this.state.time - 1
		    	},function(){
		    		_this._countDown()
		    	});
	    	}else {
	    		_this.setState({
		    		time: 60,
		    		hasSend: false
		    	});
	    	}
    	},1000);
    }

    render(){
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fff'
            }}>
                <Header isShowBack={true} title='修改手机号' goBack={goBack} />

				<View style={{paddingTop: 30, alignItems: 'center', paddingLeft: 12, paddingRight: 12}}>
					 <View style={{marginBottom: 12}}>
						<Text style={{fontSize: 15, color: '#7d7d7d'}}>为了账号安全，需要验证当前手机的有效性</Text>
					 </View>
					 <View style={{marginBottom: 45}}>
					 	<Text style={{fontSize: 15, color: '#0000ff'}}>当前绑定手机挂号：180****1629</Text>
					 </View>

					 <View style={{width: 275,paddingBottom: 10, borderBottomWidth: 1, borderColor: '#ebebeb', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
						<TextInput
			                style={{
			                	flex: 1,
			                    height: 19,
			                    padding: 0,
			                    paddingLeft: 8,
			                    fontSize: 14,
			                    borderRadius: 5,
			                }}
			                placeholder={'填写验证码'}
			                keyboardType='numeric'
			                placeholderTextColor='#747474'
			                underlineColorAndroid={'transparent'}
			            />
			            <View style={{height: 19, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
			            	{this.state.hasSend?
			            		<Text style={styles.codeBox}>{this.state.time + 's'}</Text>
			            		:
			            		<TouchableWithoutFeedback onPress={this._countDown.bind(this)}>
				            		<View>
				            			<Text style={styles.codeBox}>获取验证码</Text>
				            		</View>
				            	</TouchableWithoutFeedback>
			            	}
			            </View>
    				</View>
    				<TouchableWithoutFeedback onPress={()=>navigate('NewMobile')}>
	    				<View style={{
	    					width: 187,height: 42,borderRadius: 20,backgroundColor: '#fff',justifyContent: 'center', alignItems: 'center',marginTop: 70,
	    					shadowOffset: {width: 0, height: 5},  
					        shadowOpacity: 0.5,  
					        shadowRadius: 8,  
					        shadowColor: '#ebebeb',  
					        //注意：这一句是可以让安卓拥有灰色阴影  
					        elevation: 4, 
	    				}}>
	    					<Text style={{fontSize: 16, color: '#0000ff', textAlign: 'center'}}>下一步</Text>
	    				</View>
    				</TouchableWithoutFeedback>
				</View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    codeBox: {
    	fontSize: 14, 
    	color: '#0000ff', 
    	textAlign: 'right'
    }
})